<template>
  <div class="zhuanzheng">
    <div class="a4-container">
      <span class="print-btn">
        <router-link to="/main/renshi/renshidiaodong/zhuanzheng/list">
          <i class="el-icon-arrow-left">返回</i>
        </router-link>
        <el-button type="primary" icon="el-icon-printer" @click="printForm">打印</el-button>
      </span>
      <h2 class="form-title">员工转正申请表</h2>
      <div class="operation-box">
        <el-button type="primary" @click="addRow" v-if="type !== 'view'">新增行</el-button>
        <el-button type="primary" @click="saveForm" v-if="type !== 'view'">保存</el-button>
        <el-button type="primary" @click="goToList">列表</el-button>
      </div>

      <el-table 
        :data="formList" 
        border 
        style="width: 100%"
        :header-cell-style="{background:'#F5F7FA',color:'#303133',fontWeight: 'bold'}"
        :cell-style="{padding: '5px 0'}"
      >
        <el-table-column label="申请人" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" maxlength="4" :disabled="type === 'view'" class="table-input"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="工号" width="140">
          <template slot-scope="scope">
            <el-input v-model="scope.row.employeeId" :disabled="type === 'view'" class="table-input"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="部门" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.department" :disabled="type === 'view'" class="table-input"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="入职日期" width="160">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.joiningDate"
              type="date"
              placeholder="选择日期"
              :disabled="type === 'view'"
              value-format="yyyy-MM-dd"
              class="table-date-picker">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="试用期(月)" width="120">
          <template slot-scope="scope">
            <el-input-number 
              v-model="scope.row.trialPeriod" 
              :min="0"
              :disabled="type === 'view'"
              class="table-input-number">
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="转正日期" width="160">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.regularizationDate"
              type="date"
              placeholder="选择日期"
              :disabled="type === 'view'"
              value-format="yyyy-MM-dd"
              class="table-date-picker">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" v-if="type !== 'view'">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="removeRow(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { saveEmployeeRegularization, batchSaveEmployeeRegularization, getEmployeeRegularizationById } from '@/api/employee-regularization'

export default {
  data() {
    return {
      formList: [{
        id: null,
        name: '',
        employeeId: '',
        department: '',
        joiningDate: '',
        trialPeriod: '',
        regularizationDate: '',
        status: '待审核'
      }],
      type: ''
    }
  },
  created() {
    this.type = this.$route.query.type || 'add'
    const id = this.$route.query.id
    if (id) {
      this.fetchData(id)
    }
  },
  methods: {
    async fetchData(id) {
      try {
        const res = await getEmployeeRegularizationById(id)
        if (res.data.code === 200) {
          this.formList = [res.data.data]
        }
      } catch (error) {
        console.error('获取数据失败:', error)
      }
    },
    addRow() {
      this.formList.push({
        id: null,
        name: '',
        employeeId: '',
        department: '',
        joiningDate: '',
        trialPeriod: '',
        regularizationDate: '',
        status: '待审核'
      })
    },
    removeRow(index) {
      this.formList.splice(index, 1)
    },
    goToList() {
      this.$router.push({name: 'ZhuanzhengList'})
    },  
    async saveForm() {
      try {
        // 表单验证
        for (const item of this.formList) {
          if (!item.name) {
            this.$message.error('申请人不能为空')
            return
          }
          if (!item.employeeId) {
            this.$message.error('工号不能为空')
            return
          }
          if (!item.department) {
            this.$message.error('部门不能为空')
            return
          }
          if (!item.joiningDate) {
            this.$message.error('入职日期不能为空')
            return
          }
          if (!item.trialPeriod) {
            this.$message.error('试用期不能为空')
            return
          }
          if (!item.regularizationDate) {
            this.$message.error('转正日期不能为空')
            return
          }
        }

        let res
        if (this.formList.length === 1) {
          res = await saveEmployeeRegularization(this.formList[0])
        } else {
          res = await batchSaveEmployeeRegularization(this.formList)
        }

        if (res.code === 200) {
          this.$message.success('保存成功')
          this.$router.push('/main/renshi/renshidiaodong/zhuanzheng/list')
        }
      } catch (error) {
        console.error('保存失败:', error)
      }
    },
    printForm() {
      window.print()
    }
  }
}
</script>

<style scoped lang="scss">
.zhuanzheng {
  min-height: 100vh;
  background-color: #f0f2f5;
  padding: 20px;
  box-sizing: border-box;
}

.a4-container {
  width: 280mm;
  min-height: 297mm;
  padding: 20mm;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  box-sizing: border-box;
}

.form-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0;
}

.print-btn {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.operation-box {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.table-input {
  width: 100%;
  .el-input__inner {
    border: none;
    text-align: center;
  }
}

.table-date-picker {
  width: 100%;
  .el-input__inner {
    border: none;
    text-align: center;
  }
}

.table-input-number {
  width: 100%;
  .el-input__inner {
    border: none;
    text-align: center;
  }
}

@media print {
  .zhuanzheng {
    padding: 0;
    background-color: #fff;
  }

  .a4-container {
    width: 100%;
    min-height: auto;
    padding: 0;
    margin: 0;
    box-shadow: none;
  }

  .print-btn,
  .operation-box {
    display: none;
  }

  .el-table {
    border: 1px solid #000;
  }

  .el-table th,
  .el-table td {
    border-color: #000;
  }

  .el-input__inner {
    border: none;
  }
}
</style>